<template>
    <div id="EssayDetail">
        <span id="last" @click="toLast()">&#10094;</span>
        <h1>- {{ new Date(data[currentIndex].time).getFullYear() }} -</h1>
        <div id="contentBar" ref="contentCar">
            <div id="frontSide">
                <div id="time">
                    <p>{{ new Date(data[currentIndex].time).getDate() }}</p>
                    {{ month[new Date(data[currentIndex].time).getMonth()] }}
                </div>
                <!-- 随笔内容(随笔权限为：共有) -->
                <div v-if="!data[currentIndex].authority || login">
                    <img class="mood"
                        :src="GLOBAL.OSSImageUrlRoot + 'mood/' + data[currentIndex].moodId + '.png'"
                        alt="心情图片" title="心情">
                    <div id="textContent" v-html="data[currentIndex].content"></div>
                </div>
                <!-- 权限限制内容(随笔权限为：私有) -->
                <div v-else>
                    <span class="authorityFont"></span>
                    <p class="authorityText">内容被作者锁起来啦<br>看看其他内容叭~</p>
                </div>
                <div class="floatButton" id="left"
                    @click="currentIndex - 1 < 0 ? currentIndex = data.length : --currentIndex" v-show="data.length > 1">
                    <div id="buttonTextLeft" class="unselectable">&#10094;</div>
                </div>
                <div class="floatButton" id="right"
                    @click="currentIndex + 1 > data.length ? currentIndex = 0 : ++currentIndex" v-show="data.length > 1">
                    <div id="buttonTextRight" class="unselectable">&#10095;</div>
                </div>
            </div>
            <div id="backSide">
                <div id="backImg" v-if="!data[currentIndex].authority || login">
                    <el-image v-if="data[currentIndex].id != undefined"
                        :src="GLOBAL.OSSImageUrlRoot + 'essayImage/' + data[currentIndex].id + '.png'"
                        :preview-src-list="[GLOBAL.OSSImageUrlRoot + 'essayImage/' + data[currentIndex].id + '.png']"
                        @error="imageNotFound($event)" @load="imageFounded($event)" id="backImg" fit="contain">
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                </div>
                <div id="imgAuthorityNot" v-else>
                    <span class="authorityFont"></span>
                    <p class="authorityText">内容被作者锁起来啦<br>看看其他内容叭~</p>
                </div>
            </div>
            <span id="transfer" @click="transfer()" title="翻转" v-show="transferShow"></span>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            data: [{ time: '' }],
            month: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
            currentIndex: 0,
            carBack: false, // 当前内容卡片是否在背面(状态量)
            transferShow: true, // 当前随笔是否有图片，控制转面按钮是否显示
            login: false, // 用户是否登录
        }
    },
    methods: {
        // 通过id请求后端得到随笔详细数据
        getEssayDetail() {
            this.$axios({
                method: 'post',
                url: '/essay/getEssayByTime/' + this.$route.query.time.slice(0, 10)
            }).then(res => {
                // 添加换行
                res.data.forEach(element => {
                    element.content = element.content.replace(/\r\n/g, "<br/>")
                });
                this.data = res.data
            })
        },
        // 返回原页
        toLast() {
            window.history.back()
        },
        // 点击旋转事件
        transfer() {
            if (this.carBack) {
                this.$refs.contentCar.style.transform = 'rotateY(360deg)';
                this.carBack = false
                return
            }
            this.$refs.contentCar.style.transform = 'rotateY(180deg)';
            this.carBack = true
        },
        // 图像显示失败，不显示
        imageNotFound(e) {
            e.target.style.display = 'none' // 不显示
            this.transferShow = false
        },
        // 图片加载成功，显示
        imageFounded(e) {
            e.target.style.display = '' // 不显示
            this.transferShow = true
        },
        // 查看是否登录
        checkLogin() {
            let data = new FormData()
            data.append("token", sessionStorage.getItem("token"))
            this.$axios({
                method: 'post',
                data: data,
                url: '/admin/checkToken',
                headers: {
                    'Content-Type': 'application/x-www-form-urlcoded'
                }
            }).then(res => {
                if (res.data) {
                    this.login = true
                } else {
                    this.login = false
                }
            })
        }
    },
    mounted() {
        // 请求数据
        this.getEssayDetail()
        // 查看用户是否登录
        this.checkLogin()
    }
}
</script>

<style lang="scss" scoped>
h1 {
    font-size: $font-size-large;
    font-weight: $font-weight-large;
    color: $color-main-text;
    text-align: center;
}

span {
    display: block;
    font-size: $font-size-medium;
    font-weight: $font-weight-medium;
    margin: 25px 30px 0 30px;
    cursor: pointer;
    background-color: $color-bar;
    border-radius: 100%;
    height: 50px;
    width: 50px;
    text-align: center;
    line-height: 50px;
}

span:hover {
    color: $color-main-text;
}

.authorityFont {
    background-color: rgba(0, 0, 0, 0);
    margin: 20px auto;
    font-size: 200px;
    line-height: 200px;
    height: 200px;
    width: 200px;
    text-align: center;
    color: #1e1d1d;
    cursor: default;
}
.authorityFont:hover {
    color: #1e1d1d;
}
.authorityText {
    display: block;
    width: 80%;
    margin: 30px auto;
    text-align: center;
    border: none;
    font-size: $font-size-medium;
    font-weight: $font-weight-medium;
}
#imgAuthorityNot {
    margin-top: 100px;
}
#contentBar {
    margin: 20px auto;
    width: 50%;
    background-color: $color-background-assistant;
    border-radius: 20px;
    padding: 20px;
    position: relative;
    transition: all .5s;
    transform-style: preserve-3d;
}

img {
    max-width: 70%;
    max-height: 60%;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
}

#textContent {
    margin: 10px auto;
    text-align: center;
    font-size: $font-size-medium;
    font-weight: $font-weight-medium;
}

p {
    display: inline-block;
    font-size: $font-size-large;
    font-weight: $font-weight-small;
    margin-right: 10px;
    border-bottom: 1px solid;
}

.floatButton {
    position: absolute;
    height: 50%;
    width: 80px;
    top: 25%;
    cursor: pointer;
}

.floatButton:hover {
    color: $color-main-text;
}

#left {
    left: -120px;
    background: linear-gradient(to left, rgba(0, 0, 0, 0), $color-background-assistant);
}

#right {
    right: -120px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0), $color-background-assistant);
}

#buttonTextLeft {
    left: 50%;
    transform: translate(-50%, -50%);
}

#buttonTextRight {
    right: 50%;
    transform: translate(50%, -50%);
}

#buttonTextRight,
#buttonTextLeft {
    position: absolute;
    top: 50%;
    cursor: pointer;
    font-size: $font-size-large;
    font-weight: $font-weight-medium;
}

.unselectable {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#frontSide,
#backSide {
    width: 100%;
    height: 100%;
    backface-visibility: hidden; // 背面隐藏
    overflow: hidden;
}

#backSide {
    transform: rotateY(180deg);
    position: absolute;
    top: 0;
    right: 0;
}

#transfer {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0);
}

#backImg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#backImg::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -10%;
    height: 140%;
    width: 120%;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 8px;
}
</style>